<template>
  <el-dialog :title="form.modelName" v-model="open" width="800px" @open="initOpen" append-to-body :before-close="close"
    @close="close">
    <!-- <p class="dialogTitle">{{form.modelName}}</p> -->
    <el-form ref="casualtiesRef" :model="form" label-width="120px">
      <el-row align="middle">
        <el-col :span="12">
          <el-form-item label="模型名称">
            {{form.modelName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否默认">
            {{form.isDefault=='0'?'否':'是'}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle">
        <el-col :span="24">
          <el-form-item label="适用地区">
            {{form.province}} - {{form.city}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="middle">
        <el-col :span="12">
          <el-form-item label="维护人">
            {{form.createUserName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维护人单位">
            {{form.orgName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider border-style="dashed"></el-divider>
      <el-row>
        <el-col :span="6" class="tab-title">椭圆衰减模型</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="6">
          <span style="font-size: 16px;font-weight: bold;font-style: italic;">长轴： I<sub>a</sub> = {{form.longRatio1}} + {{form.longRatio2}}M -
          {{form.longRatio3}}{{form.longSymbol}}(R<sub>a</sub> + {{form.longRatio4}}) </span><br /><br />
          <span style="font-size: 16px;font-weight: bold;font-style: italic;">短轴： I<sub>b</sub> = {{form.shortRatio1}} + {{form.shortRatio2}}M -
          {{form.shortRatio3}}{{form.shortSymbol}}(R<sub>b</sub> + {{form.shortRatio4}}) </span><br /><br />
          I<sub>a</sub>、I<sub>b</sub>分别为长短轴烈度，M为震级，R<sub>a</sub>、R<sub>b</sub>分别为烈度为 I 时长、短半轴的长度。<br />
        </el-col>
      </el-row>
      <div v-if="form.type=='1'">
        <el-row style="margin-top: 30px;">
          <el-col :span="6" class="tab-title">破裂尺度公式</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="6">
            <span style="font-size: 16px;font-weight: bold;font-style: italic;">M = {{form.formulaRatio1}} + {{form.formulaRatio2}} * log(SRL)
            </span><br /><br />
            SRL为地表破裂带长度<br />
            最终的长轴长度=R<sub>a</sub> * 2 + SRL<br />
            长短轴比例：{{form.scale}}<br />
          </el-col>
        </el-row>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { getModelById } from '@/api/earthquakeLossesEstimation/earthquakeSetting'

const props = defineProps({
  open: Boolean,
  id: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['update:open'])
const data = reactive({
  form: {
    modelName: '',
    isDefault: '',
    province: '',
    city: '',
    createUserName: '',
    orgName: ''
  }
})
const { form } = toRefs(data)
// 查询模型详情
const getModelDetail = () => {
  getModelById(props.id).then(res => {
    if (res.code == 200) {
      res.data && (form.value = res.data)
    }
  })
}

const initOpen = () => {
  getModelDetail()
}
const close = () => {
  emits('update:open', false)
}
</script>
<style scoped lang="scss">
.el-form {
  padding-top: 20px;
  .el-form-item{
    margin-bottom: 0;
  }
}
.tab-title {
  font-size: 16px;
  font-weight: bold;
  border-left: 4px solid var(--el-color-primary);
  font-family: PingFangSC-Medium;
  padding-left: 10px;
  margin-bottom: 20px;
}
</style>